<template>
  <div class="bar">
    <div class="title">{{ title }}</div>
    <el-upload v-if="uploadText" :http-request="uploadSectionFile" :show-file-list="false" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
      <el-button size="small" type="primary">{{ uploadText }}</el-button>
    </el-upload>
  </div>
</template>

<script>
import { Loading } from "element-ui";
export default {
  props: {
    title: {},
    uploadText: {},
  },
  methods: {
    async uploadSectionFile(params) {
      let loadingInstance = Loading.service({ fullscreen: false, target: document.getElementById("editTemplate") });
      //文件上传
      const { file } = params;
      const form = new FormData();
      form.append("file", file);
      const {
        data: { data },
      } = await this.$api.optionsManage.GetHtmlByImportWord(form);
      this.$nextTick(() => {
        loadingInstance.close();
      });
      this.$emit("confirm", data);
      // this.$message({ message: '上传成功', type: 'success' });
    },
  },
};
</script>

<style scoped lang="less">
.bar {
  height: 42px;
  line-height: 42px;
  font-size: 16px;
  padding: 0 20px;
  border: 1px solid #ccc;
  border-bottom: none;
  background: #f5f8fd;
  display: flex;
  align-content: center;
  justify-content: space-between;
}
</style>
